<template>
    <pageTabelLayout>
        <template #pageHeader>
            <div class="search-form isheader" v-if="headerShow">
                <a-form size="small" :model="pageData" layout="inline">
                    <a-form-item label="保养类型">
                        <a-input allow-clear :style="{ width: '200px' }" class="bacClass" placeholder=""
                            v-model="dropDownData" @press-enter="huiche" />
                    </a-form-item>
                </a-form>
                <div>
                    <Toolbar :items="['查询', '新增', '删除']" @add="addHandler" @del="deleteHandler" @select="selectHandler">
                    </Toolbar>
                </div>
            </div>
            <div class="my-divisders">
                <a-divider orientation="center">
                    <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                    <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
                </a-divider>
            </div>
        </template>
        <template #pageTabel>
            <!-- <a-tabs   :justify="true" default-active-key="1">
                <a-tab-pane key="1" title="保养类型列表"> -->
            <a-spin :loading="pageData.pageLoading" tip="加载中" dot style="height:100%;width: 100%;z-index:999 ;">
                <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                    rowSelection="multiple" @grid-ready="gridReady" style="height:calc(100% - 45px)"
                    :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="tableDataList" :columnDefs="tc"
                    :localeText="localeText1" @columnResized="onColumnResized" @columnMoved="onColumnMoved">
                </AgGridVuesCopys>
                <paginationCopys :page-size-options="pagingList1" :total="fySelet.total" show-total show-jumper
                    show-page-size @change="PageSize" @page-size-change="change" style="justify-content: center"
                    :page-size="fySelet.size" :current="fySelet.page" />
            </a-spin>
            <!-- </a-tab-pane>
            </a-tabs> -->
        </template>


        <a-drawer style="z-index: 999" ok-text="保存" cancel-text="关闭" :drawer-style="{ zIndex: 9999 }" :mask-closable="false"
            :width="400" :ok-loading="pageData.pageLoading" :visible="showAdd" unmountOnClose @ok="addOk"
            @cancel="showAdd = false">
            <template #title>
                {{ sideTitle }}
            </template>
            <div>
                <a-form ref="formRef" :model="dataForm">
                    <a-form-item label-col-flex="80px" label="类型名称" field="upkeepName"
                        :rules="[{ required: true, message: '保养名称必填' }]" :validate-trigger="['change', 'blur']">
                        <a-input allow-clear class="bacClass" placeholder="" v-model="dataForm.upkeepName" />
                    </a-form-item>
                    <a-form-item label-col-flex="80px" label="周期" field="upkeepType"
                        :rules="[{ required: true, message: '保养名称必填' }]" :validate-trigger="['change', 'blur']">
                        <a-input allow-clear class="bacClass" placeholder="" v-model="dataForm.upkeepType" />
                    </a-form-item>
                    <a-form-item label-col-flex="80px" label="保养天数" field="upkeepDay"
                        :rules="[{ required: true, message: '保养天数必填' }]" :validate-trigger="['change', 'blur']">
                        <a-input-number allow-clear class="bacClass" v-model="dataForm.upkeepDay" />
                    </a-form-item>
                </a-form>
            </div>
        </a-drawer>
    </pageTabelLayout>
</template>

<script setup lang="ts">
import { post, get } from '@/api/http'
import { ref, reactive, onMounted, toRefs } from 'vue'
import Toolbar from '@/components/Toolbar.vue'

import { Message, Modal } from '@arco-design/web-vue'
import { localeText } from '@/api/aggridZw'
import { pagingList } from "@/api/paging";
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'

const headerShow = ref(true)

const pageData: any = reactive({
    dropDownData: '',
    showAdd: false,
    sideTitle: '',
    pageLoading: false,
})

const { dropDownData, showAdd, sideTitle } = toRefs(pageData)

const dataForm: any = reactive({
    "upkeepType": "",
    "upkeepName": "",
    upkeepDay: null
})

onMounted(() => {
    selectList()
})

function selectList() {
    pageData.pageLoading = true
    updateGridState01()
    post({
        url: 'temRepair/upkeepType/infoUpkeepTypePage',
        data: {
            page: fySelet.page,
            limit: fySelet.size,
            "upkeepName": pageData.dropDownData,
        }
    }).then((res: any) => {
        gridOption.value.setRowData(res.data.list)
        fySelet.total = res.data.total
    }).catch(console.log).finally(() => {
        pageData.pageLoading = false
    })
}

const huiche = () => {
    selectList()
}

const selectHandler = () => {
    fySelet.page = 1
    selectList()
}


const addHandler = () => {
    for (let i in dataForm) {
        dataForm[i] = ''
    }
    pageData.sideTitle = '新增保养类型'
    pageData.showAdd = true
}

const deleteHandler = () => {
    if (gridOption.value.getSelectedRows().length === 0) {
        return false
    }
    Modal.confirm({
        title: '系统提示',
        content: '确认删除选中的数据?',
        onOk() {
            post({
                url: 'temRepair/upkeepType/deleteUpkeepType',
                data: gridOption.value.getSelectedRows().map((o: any) => {
                    return o.id
                })
            }).then(({ code, data }: any) => {
                if (code === 200) {
                    Message.success({
                        content: '删除成功',
                        duration: 5000
                    })
                    fySelet.page = 1
                    selectList()

                } else {
                    Message.error({
                        content: '删除失败',
                        duration: 5000
                    })
                }

            })
        }
    })
}



const tableDataList: any = ref([])
const gridOption = ref()
const colState = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
    colState.value = params.columnApi
}
const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
    flex: 1
}

const fySelet: any = reactive({
    total: 10,
    size: 10,
    page: 1
})


const PageSize = (val: any) => {
    fySelet.page = val
    selectList()
}

const change = (val: any) => {
    fySelet.size = val
    selectList()
}

const tc = [
    {
        showRowGroup: 'hide_def',
        "headerName": "",
        "checkboxSelection": true,
        "headerCheckboxSelection": true,
        "pinned": "left",
        "width": 50,
        resizable: false,
        filter: false,
        sortable: false,
        minWidth: 50,
        maxWidth: 50,
        lockPosition: "left",
    },
    {
        headerName: '序号',
        field: 'id',
        // pinned: o['fixed'],
        width: 150
    },
    {
        headerName: '保养类型名称',
        field: 'upkeepName',
        width: 150
    },
    {
        headerName: '保养类型周期',
        field: 'upkeepType',
        width: 150
    },
    {
        headerName: '保养天数',
        field: 'upkeepDay',
        width: 150
    },
    {
        headerName: '创建人',
        field: 'createName',
        width: 150
    },
    {
        headerName: '创建时间',
        field: 'createTime',
        width: 150
    },
    {
        headerName: '最后修改人',
        field: 'updateName',
        width: 150
    },
    {
        headerName: '最后修改时间',
        field: 'updateTime',
        width: 150
    },
    {
        headerName: '操作',
        field: 'slot',
        pinned: 'right',
        width: 120,
        cellRenderer: {
            template: `
            <a-space>
                <a-tag class="tagCss" @click="a">修 改</a-tag>
            </a-space>
            `,
            setup(props: any) {
                const a = () => {
                    updateList(props.params.data)// props.params.data
                }
                return {
                    a,
                }
            }
        }
    },
]

const formRef: any = ref()

const addOk = () => {
    if (pageData.sideTitle == '新增保养类型') {
        formRef.value?.validate().then((err: any) => {
            if (!err) {
                post({
                    url: 'temRepair/upkeepType/saveUpkeepType',
                    data: [dataForm]
                }).then((res: any) => {
                    if (res.code == 200) {
                        Message.success('成功')
                        pageData.showAdd = false
                        selectList()
                    } else {
                        Message.error(res.message)
                    }
                })
            }
        })
    } else {
        formRef.value?.validate().then((err: any) => {
            if (!err) {
                post({
                    url: 'temRepair/upkeepType/updateUpkeepType',
                    data: [dataForm]
                }).then((res: any) => {
                    if (res.code == 200) {
                        Message.success('成功')
                        pageData.showAdd = false
                        selectList()
                    } else {
                        Message.error(res.message)
                    }
                })
            }
        })
    }
}

const updateList = (e: any) => {
    for (let i in e) {
        dataForm[i] = e[i]
    }
    pageData.sideTitle = '修改保养类型'
    pageData.showAdd = true
}
const localeText1: any = ref(localeText)
const pagingList1: any = ref(pagingList)
const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('MaintenanceType002', gridOption, colState, tc)
const onColumnMoved = () => {
    saveGridState01()
}
const onColumnResized = () => {
    saveGridState01()
}
</script>
<style scoped lang="less">
:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

:deep(.arco-table-td-content) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}
</style>